<template>
    <div :id="chartid" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { reactive, ref, watch, onMounted } from 'vue';
import * as echarts from "echarts";

// 接收组件传来的参数
const props = defineProps({
    chartid: {
        type: String
    },
    // 展示图例
    showLegend:{
        type: Boolean,
        default: true
    },
    // 单位
    unit:{
        type: String,
        default: '(单位：)'
    },
    xData: {
        type: Array,
        default: [], //默认值
    },
    barD: {
        type: Array,
        default: [], //默认值
    },
    lineD1: {
        type: Array,
        default: [], //默认值
    },
    lineD2: {
        type: Array,
        default: [], //默认值
    },
    lineD3: {
        type: Array,
        default: [], //默认值
    },
    lineD4: {
        type: Array,
        default: [], //默认值
    },
});

//声明周期函数，自动执行初始化
onMounted(() => {
    setTimeout(() => {
        init(props.chartid, props.xData, props.barD, props.lineD1, props.lineD2, props.lineD3, props.lineD4);

    }, 200);
});
function getImageUrl (name) {
    return new URL(`../assets/images/${name}`, import.meta.url).href;
}
function createZeroArray(length) {
  return Array.from({ length: length }, () => 0);
}
 

//初始化函数
function init (id, xData, barD, lineD1, lineD2, lineD3, lineD4) {

    // 基于准备好的dom，初始化echarts实例
    let Chart = echarts.init(document.getElementById(id));
    // 绘制图表
    let options = {
        grid: {
            top: '20%',
            bottom: '4%',
            left: '3%',
            right: '3%',
            containLabel:true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            renderMode: "html",
            className: "mtooltip",
            formatter: function (data) {
                let html = ``
                for (let i = 0; i < data.length; i++) {
                    if (data[i].value) {
                        html += ` <div class="info"><div class="ll">${data[i].marker}${data[i].seriesName}</div><em class="num">${data[i].value}</em></div>`
                    } else {
                        html += ` <div class="info"><div class="ll">${data[i].marker}${data[i].seriesName}</div><em class="num">0</em></div>`
                    }

                }
                let on = `<div class="tit">${data[0].axisValue}月</div>${html}`
                return on
            }
        },
        calculable: true,
        legend: {
            // data: ['温度', '湿度', 'CO2', '氮气'],
            show:props.showLegend,
            right: '13',
            top: '17',
            icon: 'circle',
            itemWidth: Math.ceil( 0.3125*document.body.clientWidth /100),
            itemHeight: Math.ceil( 0.3125*document.body.clientWidth /100),
            textStyle: {
                fontSize: Math.ceil( 0.625*document.body.clientWidth /100),
                color: '#fff'
            }
        },
        xAxis:{
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: 'rgba(255,255,255,.6)'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                margin: 10,
                fontSize: Math.ceil( 0.729*document.body.clientWidth /100),
                color: "#fff"
            },
            data: xData,
        },
        yAxis:[
            {
                name:props.unit,
                type: 'value',
                nameTextStyle :{
                    fontSize: Math.ceil( 0.729*document.body.clientWidth /100),
                    color:'rgba(212,249,255,.8)',
                },
                interval: 20,
                max: 100,
                min: 0,
                axisLabel: {
                    fontSize: Math.ceil( 0.625*document.body.clientWidth /100),
                    color: "#d4f9ff",

                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.3)",
                        type: "dashed"
                    }
                },
            },
        ],
        series: [
            {
                // name: '',
                type: 'bar',
                tooltip:{
                    show: false,
                },
                barWidth: 20,
                itemWidth: 8,
                itemHeight: 8,
                itemStyle: {
                    color: 'rgba(255,255,255,0)',
                    borderRadius: 0
                },
                backgroundStyle:{
                    color: 'rgba(255,255,255,.15)',
                },
                showBackground:true,
                data:createZeroArray(xData.length),
            },
            {
                name: '温度',
                type: 'line',
                symbolSize: 0,
                label: {
                    show: false,
                    position: 'top',
                },
                itemStyle: {
                    color: '#ffe85a'
                },
                data: lineD1
            },
            {
                name: '湿度',
                type: 'line',
                symbolSize: 0,
                label: {
                    show: false,
                    position: 'top',
                },
                itemStyle: {
                    color: '#3ef2fc'
                },
                data: lineD2
            },
            {
                name: 'CO2',
                type: 'line',
                symbolSize: 0,
                label: {
                    show: false,
                    position: 'top',
                },
                itemStyle: {
                    color: '#0081f8'
                },
                data: lineD3
            },
            {
                name: '氮气',
                type: 'line',
                symbolSize: 0,
                label: {
                    show: false,
                    position: 'top',
                },
                itemStyle: {
                    color: '#fe8b4c'
                },
                data: lineD4
            }
        ]
    };
    // 渲染图表
    Chart.setOption(options);
    window.addEventListener('resize', function () {
        Chart.resize();
    }, false);
}
</script>